<template>
  <el-dialog title="面试流程跟踪" :visible="visible" width="1180px" @close="handleClose">
    <div class="p-20">
      <el-row :gutter="10">
        <el-form label-width="100px" label-position="left" class="text-form">
          <el-col :span="8">
            <el-form-item label="应聘人：">
              <span>{{data.name}}</span>
              <a class="button-text" @click="resumeDialogVisible=true">查看简历</a>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="简历附件：">
              <a class="button-text">查看简历附件</a>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应聘部门：">
              <span class="text-nowrap" title="data.interviewPost">{{data.interviewPost}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="应聘岗位：">
              <a class="button-text">{{data.interviewDepartment}}</a>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="需求职级：">
              <span>{{data.demandRank}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="需求职位：">
              <span class="text-nowrap">{{data.demandPosition}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="需求类型：">
              <span class="text-nowrap">{{data.demandType}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码：">
              <span>{{data.phone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电子邮箱：">
              <span class="text-nowrap">{{data.email}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <hr class="hr-line">
      <el-row :gutter="10">
        <el-form label-width="100px" label-position="left" class="text-form">
          <el-col :span="24">
            <el-form-item label="推荐人：">
              <span>{{data.referee}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="推荐理由：">
              <span>{{data.recommendedReason || '...'}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <hr class="hr-line">
      <div class="mb-20">
        <ui-button type="lightblue" size="mini">推荐至岗位初试官</ui-button>
        <ui-button type="lightblue" size="mini">启动面试流程</ui-button>
        <ui-button type="gray" size="mini">转给其他面试官</ui-button>
        <ui-button type="gray" size="mini">放弃</ui-button>
      </div>
      <el-row :gutter="10">
        <el-form label-width="100px" label-position="left" class="text-form" size="small">
          <el-col :span="24">
            <el-form-item label="推荐原因：">
              <el-input type="textarea" v-model="reason" rows="3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批过程：">
              <p v-for="item in data.process">{{item.value}}</p>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="form-bottom t-right">
        <ui-button size="medium" @click="handleClose">取消</ui-button>
        <ui-button type="blue" size="medium">保存</ui-button>
      </div>
    </div>
    <m-resumeDialog :visible.sync="resumeDialogVisible" :resumeId="data.id"></m-resumeDialog>
  </el-dialog>
</template>

<script>
import {Dialog, Row, Col, Form, FormItem, Input} from 'element-ui'
import ResumeDialog from '@/components/resume/dialog'
  export default {
    components: {
      [Dialog.name]: Dialog,
      [Row.name]: Row,
      [Col.name]: Col,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Input.name]: Input,
      'm-resumeDialog': ResumeDialog
    },
    props: ['visible'],
    data () {
      return {
        data: {},
        reason: '',
        resumeDialogVisible: false
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.data = {
          id: 1,
          type: '伯乐', //类型
          name: '周宇', //姓名
          interviewPost: '21527-腾讯企鹅辅导学科运营', //面试岗位
          interviewDepartment: '音乐财经部', //面试部门
          wordPlace: '深圳', //工作地
          workType: '正式', //类型
          education: '本科', //学历
          currentStep: 'HR面试官HR面试官HR面试官HR面试官', //当前步骤
          manage: 'mywaymai', //处理人
          startTime: '2018-9-22', //发起时间
          endTime: '2018-10-22', //到达时间
          now: 0,
          total: 0,
          demandRank: 'P2', //需求职级
          demandPosition: '产品运营', //需求职位
          demandType: '新增需求', //需求类型
          phone: '13342223344',
          email: ' ylrocks@icloud.com',
          referee: 'huanhu',
          recommendedReason: '',
          process: [
            {value: '12345'},
            {value: '测试测试测试'}
          ]
        }
      },
      handleClose() {
        this.$emit('update:visible', false)
      },
    }
  }
</script>

<style>

 
</style>
